<!doctype html>
  
<!--
  ~ /*******************************************************************************
  ~  jquery.mb.components
  ~  file: demo_screen.html
  ~
  ~  Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);
  ~  Open lab srl, Firenze - Italy
  ~  email: matteo@open-lab.com
  ~  site: 	http://pupunzi.com
  ~  blog:	http://pupunzi.open-lab.com
  ~ 	http://open-lab.com
  ~
  ~  Licences: MIT, GPL
  ~  http://www.opensource.org/licenses/mit-license.php
  ~  http://www.gnu.org/licenses/gpl.html
  ~
  ~  last modified: 15/05/14 22.06
  ~  ******************************************************************************/
  -->

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>mbZoomImage</title>
  <style type="text/css">
    body{
      font-family:Arial, Helvetica, sans-serif;
			background: #3e3e3e;
    }
		h3{
			margin-bottom: 10px;
		}
    .wrapper{
			background: #333333;
      position:relative;
      font-family:Arial, Helvetica, sans-serif;
			margin:auto;
      margin-top:90px;
      width:900px;
			padding: 20px;
			color: #fff;
			border-radius: 30px;
			box-shadow: 0 0 5px rgba(0,0,0,.8);
    }

    span.btn{
      padding:10px;
      display:inline-block;
      cursor:pointer;
      font:12px/14px Arial, Helvetica, sans-serif;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
			background-color: #666666;
			color: #fff;
			box-shadow:inset 0 0 2px rgba(0,0,0,.8);
			border: 1px solid gray;
    }

    span.btn:hover{
			background-color:#eee;
			color: #333333;
			box-shadow: 0 0 2px rgba(0,0,0,.8);
    }

		#screen{
			width: 900px;
			height: 450px;
			border: 1px solid gray;
			background: rgba(0,0,0,1);
		}

		#thumbs img{
			height: 67px;
			margin: 5px;
			box-shadow: 0 0 5px rgba(0,0,0,.5);
			border: 3px solid rgba(255,255,255,.5);
			cursor:url("css/zoomin.png"), -moz-zoom-in;
		}

		#thumbs img:hover{
			border: 3px solid rgba(255,255,255,1);
		}

		#controls{
			width: 900px;
			text-align: right;
		}

		.explanation b{
			color:#999;
		}

		.explanation {
			display:none;
		}

		#showExp{
			padding: 10px;
			border-radius: 10px;
			background: #333333;
			display: inline-block;
			font-size: 18px;
			font-weight: bold;
			color: #666666;
			cursor: pointer;
			margin: 5px;
			float: right;
			box-shadow:inset 0 0 4px rgba(0,0,0,.6);
		}

		#showExp:hover{
			background: #fff;
		}
    
  </style>

	<link rel="stylesheet" type="text/css" href="css/mb.zoomify.css" media="screen" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="inc/mb.zoomify.js"></script>

  <script type="text/javascript">
    $(function(){
      if (self.location.href == top.location.href){
        $("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
        var logo=$("<a href='http://pupunzi.com/#mb.components/mb.zoomify/zoomify.html' style='position:absolute;top:10px;left:10px;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");
        $("body").prepend(logo);
        $("#logo").fadeIn();
      }

			setTimeout(function(){
				$("#thumbs").find("img").eq(0).click();
			},500);

    });
  </script>

</head>
<body>
<div class="wrapper">
  <h1>mb.zoomify.demo</h1>
	<div id="screen"></div>
	<br>
	<div id="controls">
		<span class="btn" onclick="$('#screen').mbZoomify_zoom('in')">zoom in</span>
		<span class="btn" onclick="$('#screen').mbZoomify_zoom('out')">zoom out</span>
	</div>
	<div id="thumbs">
		<img  src="elements/17_lr.jpg"  data-highres="elements/17_hr.jpg" onclick="$(this).mbZoomify({screen:'#screen'});">
		<img  src="elements/18_lr.jpg"  data-highres="elements/18_hr.jpg" onclick="$(this).mbZoomify({screen:'#screen'});">
		<img  src="elements/19_lr.jpg"  data-highres="elements/19_hr.jpg" onclick="$(this).mbZoomify({screen:'#screen'});">
		<img  src="elements/20_lr.jpg"  data-highres="elements/20_hr.jpg" onclick="$(this).mbZoomify({screen:'#screen'});">
	</div>
	<div id="showExp" onclick="if($('.explanation').is(':visible')){ $('.explanation').slideUp();} else {$('.explanation').slideDown();}">?</div>
	<br style="clear: both;">
	<div class="explanation">
		<h3>How to <img src="css/zoomin.png"> Zoom in:</h3>
		1. <b>Double click</b> on the image to <b>zoom in to that point</b>.
		<br>
		2. Or hold down the <b></b> key (mac) or the <b>ctrl key</b> (PC) and <b>click</b> on the image.
		<br>
		3. Or hold down the <b>plus</b> key to increment the zoom.
		<br>
		4. Or hold down the <b></b> key (mac) or the <b>ctrl key</b> (PC) and use the <b>mouse wheel</b>.

		<h3>How to <img src="css/zoomout.png"> Zoom out:</h3>
		1. <b>Double click</b> on the zoomed image to <b>zoom out</b>.
		<br>
		2. Or hold down the <b> + alt</b> key (mac) or the <b>ctrl + alt</b> key (PC) and <b>click</b> on the image.
		<br>
		3. Or hold down <b>minus</b> key to decrement the zoom.
		<br>
		4. Or hold down the <b></b> key (mac) or the <b>ctrl key</b> (PC) and use the <b>mouse wheel</b>.
	</div>
</div>
<p style="text-align: center;"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=V6ZS8JPMZC446&amp;lc=GB&amp;item_name=mb%2eideas&amp;item_number=MBIDEAS&amp;currency_code=EUR&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG_global%2egif%3aNonHosted"><img src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG_global.gif" alt="PayPal" border="0" /></a></p>

</body>
</html>
